<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title>
</head>
<style>
    ol li {
        color: red;
    }

    ol li a {
        color: rgb(228, 71, 4);
    }

    ul li {
        color: blue;
    }

    .color li {
        color: black;
    }

    /* 子选择器，使用>来选择 */
    div>a {
        color: pink;
        text-decoration: none;
    }

    /* 并集选择器使用逗号来表示，来进行同时定义 */
    /* 最后一个选择器不需要加逗号 */
    div,
    p,
    .pig li {
        color: pink;
    }
</style>

<body>
    <ol>
        <li>111</li>
        <li>112</li>
        <li>113 <a href="#">name!!!!
            </a>
        </li>
    </ol>
    <ul>
        <li>121</li>
        <li>122</li>
        <li>123</li>
        <li>change</li>
    </ul>
    <ul class="color">
        <li>121</li>
        <li>122</li>
        <li>123</li>
        <li>change</li>
    </ul>

    <!-- 子选择器 -->
    <!-- <div>
        <a href="#">儿子</a>
        <p>
            <a href="#">孙子</a>
        </p>
    </div> -->

    <div>111</div>
    <p>222</p>
    <span>333</span>
    <ul class="pig">
        <li>pig1</li>
        <li>pig2</li>
        <li>pig3</li>
    </ul>


</body>

</html>